<script lang="ts">
    import { url } from '$lib/data';
    url.set("/user");
    
    import { Alert, Chart, Label } from 'flowbite-svelte';
    import { ChevronDownOutline } from 'flowbite-svelte-icons';
    
    import { slide } from 'svelte/transition';

    let isOpen = false;

    const options = {
    series: [90, 85, 70],
    colors: ['#1C64F2', '#16BDCA', '#FDBA8C'],
    chart: {
      height: '380px',
      width: '100%',
      type: 'radialBar',
      sparkline: {
        enabled: true
      }
    },
    plotOptions: {
      radialBar: {
        track: {
          background: '#E5E7EB'
        },
        dataLabels: {
          show: false
        },
        hollow: {
          margin: 0,
          size: '32%'
        }
      }
    },
    grid: {
      show: false,
      strokeDashArray: 4,
      padding: {
        left: 2,
        right: 2,
        top: -23,
        bottom: -20
      }
    },
    labels: ['Done', 'In progress', 'To do'],
    legend: {
      show: true,
      position: 'bottom',
      fontFamily: 'Inter, sans-serif'
    },
    tooltip: {
      enabled: true,
      x: {
        show: false
      }
    },
    yaxis: {
      show: false,
      labels: {
        formatter: function (value) {
          return value + '%';
        }
      }
    }
  };
</script>

<div class="mt-2 max-w-full grid place-items-center">
    <div class="w-[70%] bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 rounded-lg border border-gray-200 dark:border-gray-700 divide-gray-200 dark:divide-gray-700 shadow-md flex flex-col p-4 sm:p-6 transition-shadow duration-300 ease-in-out hover:shadow-lg ">
        <div class="flex">
            <img src="/user/laugh.svg" alt="user-state" class="w-[10rem] m-8">
            <Alert color="green" class="w-full flex flex-col">
                <span class="font-medium text-4xl">您，不可战胜的！</span>
                <p class="font-medium text-xl">
                根据最近的检查和评估结果，您的身体状况非常好！
                这是您坚持健康生活方式和积极配合医疗建议的成果。
                请您继续保持，同时注意定期体检，保持良好的饮食和适量的运动。
                如果您有任何健康相关的问题或疑问，随时欢迎您咨询。
                祝您健康长寿，生活愉快！
                </p>
            </Alert>
        </div>
    </div>
    <div class="flex w-full justify-center">
        <div class="w-[30%] bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 rounded-lg border border-gray-200 dark:border-gray-700 divide-gray-200 dark:divide-gray-700 shadow-md flex flex-col p-4 sm:p-6 transition-shadow duration-300 ease-in-out hover:shadow-lg ">
          <div class="w-[100%] grid place-items-center ">
            <div class="bg-gray-50 dark:bg-gray-700 p-3 rounded-lg">
              <div class="grid grid-cols-3 gap-3 mb-2">
                <dl class="bg-orange-50 dark:bg-gray-600 rounded-lg flex flex-col items-center justify-center h-[78px]">
                  <dt class="w-8 h-8 rounded-full bg-orange-100 dark:bg-gray-500 text-orange-600 dark:text-orange-300 text-sm font-medium flex items-center justify-center mb-1">12</dt>
                  <dd class="text-orange-600 dark:text-orange-300 text-sm font-medium">目标</dd>
                </dl>
                <dl class="bg-teal-50 dark:bg-gray-600 rounded-lg flex flex-col items-center justify-center h-[78px]">
                  <dt class="w-8 h-8 rounded-full bg-teal-100 dark:bg-gray-500 text-teal-600 dark:text-teal-300 text-sm font-medium flex items-center justify-center mb-1">23</dt>
                  <dd class="text-teal-600 dark:text-teal-300 text-sm font-medium">进行中</dd>
                </dl>
                <dl class="bg-blue-50 dark:bg-gray-600 rounded-lg flex flex-col items-center justify-center h-[78px]">
                  <dt class="w-8 h-8 rounded-full bg-blue-100 dark:bg-gray-500 text-blue-600 dark:text-blue-300 text-sm font-medium flex items-center justify-center mb-1">64</dt>
                  <dd class="text-blue-600 dark:text-blue-300 text-sm font-medium">完成</dd>
                </dl>
              </div>
              <button on:click={() => (isOpen = !isOpen)} type="button" class="hover:underline text-xs text-gray-500 dark:text-gray-400 font-medium inline-flex items-center">展示更多 <ChevronDownOutline class="w-2 h-2 ms-1" /> </button>
              {#if isOpen}
                <div transition:slide id="more-details" class="border-gray-200 border-t dark:border-gray-600 pt-3 mt-3 space-y-2">
                  <dl class="flex items-center justify-between">
                    <dt class="text-gray-500 dark:text-gray-400 text-sm font-normal">每日任务完成效率:</dt>
                    <dd class="bg-green-100 text-green-800 text-xs font-medium inline-flex items-center px-2.5 py-1 rounded-md dark:bg-green-900 dark:text-green-300">
                      <svg class="w-2.5 h-2.5 me-1.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 14">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13V1m0 0L1 5m4-4 4 4" />
                      </svg> 57%
                    </dd>
                  </dl>
                  <dl class="flex items-center justify-between">
                    <dt class="text-gray-500 dark:text-gray-400 text-sm font-normal">检测的时间:</dt>
                    <dd class="bg-gray-100 text-gray-800 text-xs font-medium inline-flex items-center px-2.5 py-1 rounded-md dark:bg-gray-600 dark:text-gray-300">13 days</dd>
                  </dl>
                  <dl class="flex items-center justify-between">
                    <dt class="text-gray-500 dark:text-gray-400 text-sm font-normal">下次会诊:</dt>
                    <dd class="bg-gray-100 text-gray-800 text-xs font-medium inline-flex items-center px-2.5 py-1 rounded-md dark:bg-gray-600 dark:text-gray-300">Thursday</dd>
                  </dl>
                </div>
              {/if}
            </div>
            <Chart {options} class="py-6" />
          </div>  
        </div>
        <!-- <div class="w-[40%] bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 rounded-lg border border-gray-200 dark:border-gray-700 divide-gray-200 dark:divide-gray-700 shadow-md flex flex-col p-4 sm:p-6 transition-shadow duration-300 ease-in-out hover:shadow-lg ">
    
        </div> -->
    </div>
</div>